<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" backgroundColor="#fff" color="#333" :tabHeight="80">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="top-bar">
					<!-- 定位 -->
					<view class="location-wrapper" @tap.stop.prevent="getLocation()">{{CityName}}</view>
					<view class="category-list">
						<!-- 陪玩类目tab -->
						<tabs v-if="CategoryList.list.length > 1" @click="onCategory" keyName="categoryName"
							:list="CategoryList.list" itemStyle="auto">
						</tabs>
					</view>
				</view>
			</view>
		</tui-navigation-bar>
		<mescroll-body @init="mescrollInit" @down="refresherrefresh" @up="scrolltolower" topbar :isOptUp="false"
			:headerStyle="headerStyle" mescrollDy :up="upOption" bottom="130rpx" :bottombar="false" :top="headerHeight"
			:down="mescrollDown" :safearea="true">
			<view>
				<!-- main -->
				<view class="main">
					<view class="content-main">
						<!-- 陪玩列表 -->
						<view class="accompany">
							<view class="accompany-loading">
								<uv-loading-icon :show="!accompanyList.loading" :size="28" timing-function="linear"
									mode="circle"></uv-loading-icon>
							</view>
							<template v-if="accompanyList.list.length > 0">
								<view v-for="(item,index) in accompanyList.list" :key="item.userId">
									<navigator class="accompany-list"
										:url="'/page_sharing/accompany/details?id=' + item.userId + '&area=' + area + '&categoryId=' + CategoryList.id"
										hover-class="none">
										<text
											v-show="false">{{'/page_sharing/accompany/details?id=' + item.userId}}</text>
										<view class="accompany-item">
											<view class="accompany-profile">
												<!-- <image class="avatarUrl" :src="item.avatar" mode="aspectFill"></image> -->
												<uv-image mode="aspectFill" class="avatarUrl" :src="item.avatar"
													:lazyLoad="true" :observeLazyLoad="true" width="100%" height="100%"
													radius="50%" full shape="circle"></uv-image>
											</view>
											<view class="accompany-info">
												<view class="accompany-basic dis-flex">
													<view class="user-name onelist-hidden">{{item.nickName}}</view>
													<view class="location-wrapper">{{item.distance | distance}}
													</view>
												</view>
												<view class="label">
													<template v-for="(sin,li) in item.pengCategoryList">
														<view class="label-item"
															:class="{'label-item-major':sin.authState == 1}"
															:key="sin.categoryId" v-if="li < 2">
															{{sin.categoryName}}
														</view>
													</template>
													<!-- <view class="sl" v-if="item.pengCategoryList.length > 2">...</view> -->
												</view>
												<view class="information">
													<view class="price">
														<text class="price-num">￥<text class="num">{{item.pengActualPrice}}</text>/{{item.serviceType == 1 ? '次':'小时'}}</text>
														<text class="serve-num" v-if="item.orderCount!=0 && false">已服务{{item.orderCount}}单</text>
													</view>
													<image class="place-order"
														src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/peng.png">
													</image>
												</view>
											</view>
										</view>
										<view class="accompany-bottom" v-if="item.pengUserDescribe">
											<view class="dynamic" v-if="item.pengUserDescribe.describeType == 1">
												<view class="dy-iconfont icon-suolvetu"
													style="color: #BBBCBB; font-size: 16px;"></view>
												<view class="content onelist-hidden">
													更新了动态：{{item.pengUserDescribe.describeStr}}</view>
											</view>
											<view class="dynamic" v-else>
												<uv-avatar-group :maxCount="3" :urls="[item.pengUserDescribe.avatar]"
													size="16" gap="0.4"></uv-avatar-group>
												<view class="content onelist-hidden">
													等人评价：{{item.pengUserDescribe.describeStr}}</view>
											</view>
										</view>
									</navigator>
									<view class="advertising" v-if="index == 2 && isBuy == 0 && false"
										@tap.stop.prevent="lookOver(isBuy)"></view>
									<button class="advertising" v-else-if="index == 2 && false" open-type="contact"> </button>
								</view>
							</template>
							<empty v-show="accompanyList.loading && accompanyList.list.length <= 0"></empty>
						</view>
						<view v-show="load.loading">
							<uv-load-more :status="load.status" :loading-text="load.loadingText"
								:nomore-text="load.nomoreText" :line="load.status == 'nomore'" />
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- #ifdef MP -->
		<addition-MP></addition-MP>
		<!-- #endif -->
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
		<tabbar :current="tabbarCurrent" backdropFilter :tabBar="tabBar" @dblclick="dblclick"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import tabs from '@/uni_modules/uv-tabs/components/uv-tabs/uv-tabs-index.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	const app = getApp();
	export default {
		mixins: [MescrollMixin],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			tabbar,
			tabs
		},
		data() {
			return {

				tabbarCurrent: 1, //当前索引
				tabBar: app.globalData.tabBar,
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5,
				navBarTop: 0,
				CityName: '正在定位',
				area: '余杭区',
				city: '杭州市',
				userLatitude: '',
				userLongitude: '',
				skeletonShow: true,
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				// 轮播
				bannerList: [],
				CategoryList: {
					list: [{
						id: 0,
						categoryName: '全部',
						categoryIcon: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/temporary/all.png'
					}],
					current: 0,
					id: 0
				},
				accompanyList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				getLocatStatus: false,
				tempHeight: 0,
				headerStyle: {
					backgroundImage: 'url(https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png)',
					backgroundRepeat: 'no-repeat',
					backgroundSize: '100% 640rpx'
				},
				mescrollDown: {
					offset: 60,
					auto: false,
					beforeEndDelay: 500,
					textInOffset: '',
					textOutOffset: '',
					textLoading: '',
					textSuccess: '已更新至最新内容',
					textErr: ''

				},
				upOption: {
					auto: false,
					// onScroll: true,
					// isBounce: true,
					toTop: {
						src: '' // 不显示回到顶部按钮
					},
					empty: {
						use: false
					},
				},
				cityList: [],
				rpx: app.globalData.widthPx / 750,
				couponDetail: {},
				isBuy: 0,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			headerHeight() {
				return app.globalData.topBar.statusBarHeight + 44 + 80 * this.rpx + 'px'
			},
			topBarHeight() {
				return 32 + 80 * this.rpx + 'px'
			},
		},
		filters: {
			distance(value) {
				let new_value = Math.floor(value * 100) / 100;
				let new_distance = new_value * 1000
				if (value > 1) {
					return new_value + "km"
				} else if (value < 1 && new_distance > 100) {
					return new_distance + "m"
				} else {
					return '<100m'
				}
			}
		},
		onLoad(options) {
			//加载页面数据
			this.getPageData();
		},
		onShow: function() {
			uni.hideTabBar()
			app.globalData.tabBar[0].name = 'active-home'
			this.couponDetail = uni.getStorageSync('coupon_detail') ? uni.getStorageSync('coupon_detail') : {};
			if (this.couponDetail && this.couponDetail.userCouponId) {
				this.isBuy = 1
			}
		},
		onShareAppMessage: function() {
			//转发参数
			return {
				// 转发的标题
				title: 'PENG一下，趣收获',
				desc: 'PENG一下，趣收获',
				// 转发的路径，默认是当前页面，必须是以‘/’开头的完整路径，/pages/index/index
				path: '/pages/community/index',
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
				//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				// imageUrl: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/share-1.png',
			}
		},
		methods: {
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestPageBanner(), this.getLocat(), this.getCityList()]).then(() => {
					this.skeletonShow = false;
					uni.stopPullDownRefresh();
				});
			},
			scrolltolower() {
				if (this.accompanyList.hasMore && this.accompanyList.loading) {
					this.load.loading = true
					this.requestPengList().then((res) => {
						this.mescroll.endSuccess(res.records, res.hasMore);
					});
				}
			},
			refresherrefresh() {
				if (this.getLocatStatus) {
					this.accompanyList.page = 1
					this.requestPengList().then((res) => {
						this.mescroll.endSuccess();
					});
				}
			},
			dblclick() {
				this.mescroll.scrollTo(0, 300); // 执行回到顶部
				setTimeout(() => {
					this.mescroll.triggerDownScroll()
				}, 300)
			},

			getLocation() {
				uni.navigateTo({
					url: '/pages/index/location'
				})
			},
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			lookOver(buy) {
				uni.navigateTo({
					url: '/page_account/advertising/advertising?isBuy=' + buy
				})
			},
			onCategory(item) {
				// console.log(this.CategoryList.id , item.id);
				let that = this
				if (that.CategoryList.id != item.id) {
					that.CategoryList.id = item.id
					that.accompanyList.page = 1
					that.load.loading = false
					that.accompanyList.hasMore = true
					that.mescroll.resetUpScroll()
					this.mescroll.scrollTo(0, 100); // 执行回到顶部
					// this.requestPengList()
				}
			},
			//获取城市列表
			getCityList() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/index/address/change", null,
						(result) => {
							let data = result.data
							data.forEach((item) => {
								item.childList.forEach((li) => {
									this.cityList.push(li.name)
								})
							})
						}, null, () => {
							resolve();
						}
					);
				});
			},
			// 获取地理位置
			async getLocat() {
				let _that = this;
				uni.$on('selectArea', function(data) {
					_that.CityName = data.city + data.area
					_that.city = data.city
					_that.area = data.area
					_that.accompanyList.list = [];
					_that.accompanyList.page = 1
					_that.requestPengList()
					return
				})
				const location = await app.getLocationInfoGd();
				console.log(location);
				_that.getLocatStatus = !!location.status
				if (location.status == 'fail') {
					_that.CityName = location.value
					_that.city = '杭州市'
					_that.area = '余杭区'
					uni.setStorage({
						key: 'City_Name',
						data: '正在定位',
					});
				} else {
					// #ifdef MP
					_that.city = location.city
					_that.area = location.area ? location.area : location.street;
					_that.userLatitude = location.latitude;
					_that.userLongitude = location.longitude
					// #endif

					// 获取地理位置
					this.getCityName()
				}
				this.requestPengList()
			},
			//获得城市缓存
			getCityName() {
				let _that = this;
				uni.getStorage({
					key: 'City_Name',
					success(res) {
						_that.CityName = res.data
					}
				})
			},
			// banner && 类目
			requestPageBanner() {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/index/banner", null,
						(result) => {
							let data = result.data
							data.indexCategoryList.forEach((item, index) => {
								this.$set(this.CategoryList.list, index + 1, item)
							})
							data.indexBannerList.forEach((item, index) => {
								this.$set(this.bannerList, index, item)
								this.$set(this.bannerList[index], 'id', index + 1)
							})
							this.bannerList = this.bannerList.sort((a, b) => {
								return a.sortValue - b.sortValue
							})
						}, null, () => {
							resolve();
						}
					);
				});
			},
			// 首页碰头人列表查询
			requestPengList() {
				return new Promise((resolve, reject) => {
					this.accompanyList.loading = false
					app._post_form(
						"/client/index/peng-user/page", {
							current: this.accompanyList.page,
							extra: {},
							model: {
								categoryId: this.CategoryList.id,
								countyName: this.area,
								cityName: this.city,
								userLatitude: this.userLatitude,
								userLongitude: this.userLongitude,
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.accompanyList;
							if (1 == page) {
								list.length = 0;
							}
							list = [...list, ...records];
							hasMore = total > list.length;
							if (hasMore) {
								page++;
								this.load.loading = false
							} else {
								this.load.status = 'nomore'
								this.load.loading = list.length > 4
							}
							resolve({
								records: records.length,
								hasMore
							});
							this.accompanyList.page = page;
							this.accompanyList.list = list;
							this.accompanyList.hasMore = hasMore;
						}, () => {
							this.mescroll.endErr();
						}, () => {
							reject();
							uni.stopPullDownRefresh();
							this.accompanyList.loading = true
						}
					);
				});
			},

			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss">
	page,
	body {
		background: #F6F8F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100%;
		min-height: calc(100vh - 130rpx);

		&::after {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			content: '';
			width: 100vw;
			height: 490rpx;
			background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/order-header2.png');
			background-repeat: no-repeat;
			background-size: 100vw 490rpx;
			box-sizing: border-box;
		}

		/deep/.tui-navigation-bar {
			background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/order-header2.png');
			background-repeat: no-repeat;
			background-size: 100vw 490rpx;
		}

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			// display: flex;
			// align-items: center;
			// box-sizing: border-box;
			transform: translateZ(0);
			z-index: 99999;

			.top-bar {
				// display: flex;
				// align-items: center;
				padding: 0 16rpx;

				.location-wrapper {
					flex-grow: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-weight: 900;
					color: #232323;
					line-height: 37rpx;
					margin-bottom: 32rpx;

					&::before {
						font-family: "dy-iconfont";
						content: "\e66e";
						font-size: 28rpx;
						padding-right: 10rpx;
						box-sizing: border-box;
					}
				}

				.category-list {}

			}


			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #fff;
				// color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}

			.tabs-list {
				box-sizing: border-box;
				padding: 20rpx 0 20rpx 32rpx;
				// background: #FFFFFF;
				width: 100%;
				display: flex;
				align-items: center;

				.tabs {
					font-size: 32rpx;
					font-weight: 900;
					color: #999999;
					line-height: 44rpx;
					margin-right: 28rpx;

					&.active {
						font-size: 36rpx;
						font-weight: 900;
						color: #222222;
						line-height: 44rpx;
						position: relative;
						z-index: 2;
						// transition: all .3s;

						&::before {
							content: "";
							display: block;
							width: 48rpx;
							height: 48rpx;
							background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community//tab-active.png');
							background-size: 100%;
							position: absolute;
							right: -10rpx;
							bottom: -18rpx;
							z-index: -1;
						}
					}
				}
			}
		}

		.main {
			// padding: 24rpx 0 0;
			// padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
			// padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
			box-sizing: border-box;
			position: relative;
			z-index: 2;

			.city-reminder {
				font-size: 26rpx;
				font-weight: 400;
				color: #FFBF12;
				line-height: 40rpx;
				box-sizing: border-box;
				padding: 28rpx 24rpx;
				background: #FFF8E5;
				border-radius: 40rpx;
			}

			.content-main {
				padding: 0 24rpx 10rpx;

				/deep/ .uv-tabs {
					margin-top: 0;
				}
			}

			scroll-view {
				white-space: nowrap;
			}

			.banner {
				margin-bottom: 32rpx;
			}

			.category-tab {
				.menu-item {
					display: inline-block;
					width: 132rpx;
					height: 128rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin: 32rpx 12rpx 24rpx 0;
					box-shadow: 2rpx 3rpx 11rpx 0rpx rgba(224, 224, 224, 0.5);
					font-size: 28rpx;
					font-weight: 900;
					color: #BBBCBB;
					line-height: 37rpx;

					&.menu-item-active {
						background: linear-gradient(144deg, #CCFA2F 0%, #ABF61A 55%, #A7F517 100%);
						color: #101010;
					}

					.menu-item-box {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						height: 100%;
					}

					.menu-image-wrapper {
						height: 60rpx;
						margin-bottom: 3rpx;

						.icon {
							height: 100%;
						}
					}

					.name {}
				}
			}

			.accompany {
				margin-top: 12rpx;
				position: relative;

				.accompany-loading {
					position: absolute;
					top: 40rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.accompany-list {
					background: #FFFFFF;
					border-radius: 40rpx;
					padding: 24rpx;
					box-sizing: border-box;
					margin-bottom: 12rpx;

					.accompany-item {
						display: flex;

						.accompany-profile {
							width: 160rpx;
							height: 160rpx;
							// background: #7D6565;
							border-radius: 50%;
							flex-shrink: 0;
							margin-right: 16rpx;
							position: relative;

							.avatarUrl {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.accompany-info {
							width: calc(100% - 184rpx - 22rpx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;

							.accompany-basic {
								width: 100%;
								justify-content: center;
								margin-bottom: 17rpx;

								.user-name {
									font-size: 30rpx;
									font-weight: 900;
									color: #282D2D;
									line-height: 44rpx;
									margin-right: 20rpx;
								}

								.location-wrapper {
									flex-grow: 1;
									padding: 0;
									font-size: 22rpx;
									color: #BBBCBB;
									line-height: 30rpx;
									display: flex;
									align-items: center;
									flex-shrink: 0;
									justify-content: flex-end;

									&::before {
										font-family: "dy-iconfont";
										content: "\e66e";
										font-size: 28rpx;
										padding-right: 10rpx;
										box-sizing: border-box;
									}
								}

							}

							.score {
								display: flex;
								align-items: center;
								margin-bottom: 19rpx;

								.value {
									font-size: 20rpx;
									font-weight: 400;
									color: #EF5668;
									line-height: 30rpx;
									margin-left: 5rpx;
								}

								.serve-num {
									font-size: 20rpx;
									font-weight: 400;
									color: #BBBCBB;
									line-height: 28rpx;
									margin-left: 16rpx;
								}
							}

							.label {
								display: flex;

								.label-item {
									box-sizing: border-box;
									padding: 4rpx 12rpx;
									background: #EFF9E6;
									border-radius: 8rpx;
									margin-right: 12rpx;
									font-size: 20rpx;
									font-weight: 400;
									line-height: 28rpx;
									color: #6D9E15;
								}

								.sl {
									// font-size: 20rpx;
									color: #BBBCBB;
								}

								.label-item-major {
									padding: 4rpx 12rpx 4rpx 115rpx;
									background: linear-gradient(130deg, #FFFBEB 0%, #FFF1C1 48%, #FFF5D3 100%);
									position: relative;
									color: #8E4400;

									&::before {
										content: "";
										display: block;
										box-sizing: border-box;
										width: 103rpx;
										height: 36rpx;
										background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-1.png');
										background-size: 100% 100%;
										position: absolute;
										left: 0;
										top: 0;
									}
								}
							}

							.information {
								margin-top: 24rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.price {
									font-size: 22rpx;
									font-weight: 900;
									color: #0E0E0D;
									line-height: 44rpx;
									flex: 1;
								}

								.price-num {
									margin-right: 20rpx;

									.num {
										font-size: 30rpx;
									}

								}

								.serve-num {
									font-size: 22rpx;
									font-weight: 400;
									color: #BBBCBB;
									line-height: 30rpx;
								}

								.place-order {
									flex-shrink: 0;
									width: 124rpx;
									height: 48rpx;
								}
							}
						}
					}

					.accompany-bottom {
						margin-top: 24rpx;

						.dynamic {
							display: flex;
							align-items: center;

							.content {
								font-size: 22rpx;
								font-weight: 400;
								color: #BBBCBB;
								line-height: 30rpx;
								margin-left: 8rpx;
							}
						}
					}
				}

				.advertising {
					width: 702rpx;
					height: 76rpx;
					// background: #E2F2C7;
					padding: 0;
					margin: 0;
					border-radius: 38rpx;
					margin-bottom: 16rpx;
					background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/free-2.png');
					background-repeat: no-repeat;
					background-size: cover;
				}
			}
		}
	}
</style>